<template>
    <div>
        <van-image class="img-banner"
                   src="http://lyc.kmmyxb.cn/lyc/static/img/bg.6e54e69.jpg" />
        <div>
            <div class="classify flexs">
                <div class="classify-three"
                     v-for="(item, index) in middleimages"
                     :key="index"
                     @click="Onclick(item.id)">
                    <van-image class="classify-img"
                               :src="item.imgSrc" />
                    <p class="classify-text">{{item.name}}</p>
                </div>

            </div>

        </div>
    </div>

</template>

<script>
import TabBar from "./TabBar.vue";
export default {
    components: {
        TabBar
    },
    data() {
        return {
            num: 2,
            active: 0,

            // middleimages: [{ id: 0, name: "司机加盟", imgSrc: require("../assers") }],
            middleimages: [
                { id: 0, name: "司机加盟", imgSrc: require("../assets/images/a1.png") },
                { id: 1, name: "我要出行", imgSrc: require("../assets/images/a2.png") },
                { id: 2, name: "个人中心", imgSrc: require("../assets/images/a3.png") }
            ]
        };
    },
    methods: {
        Onclick(id) {
            switch (id) {
                case 0:
                    //点击跳转至上次浏览页面
                    // this.$router.go(-1)

                    console.log(0);

                    break;
                case 1:
                    console.log(1);

                    break;
                case 2:
                    //指定跳转地址
                    this.$router.replace("/MyInfo");
                    console.log(2);

                    break;
                default:
                    console.log("错误!");
                    break;
            }
        }
    }
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
}
div {
    display: block;
    box-sizing: border-box;
}
.banner {
    width: 100%;
    height: 100%;
}

.img-banner {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.classify {
    width: 100%;
    height: 132.5px;
    position: fixed;
    bottom: 170px;
    left: 0;
    z-index: 11;
}
.classify-three {
    width: 33.33%;
    text-align: center;
}

.classify-img {
    width: 75px;
    height: 75px;
    margin-left: 25px;
    position: relative;
    z-index: 11;
}
.classify-text {
    font-size: 18px;
    width: 100%;
    text-align: center;
    color: #fff;
    margin-top: 2px;
}

.flexs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
</style>

